<template id="buy">
    <div class="mm_b">
       <div class="buy" v-for="(list,index) in item_s" :class="'buy_'+index">
           <div v-for="lis in list">
           <div class="bi_buy" v-if="lis.is_show==1?1:0" >

                  <!-- <div class="buy_1"><img class='img' src="../image/x_left.png" alt=""></div>-->
                   <span id="buy_3" @click="getScrollTop()">{{lis.title}}</span>
                 <!--  <div class="buy_2"><img class="img_1" src="../image/x_right.png" alt=""></div>-->

               <p class="delicious">{{lis.brief}}</p>
           </div>
           <div class="tag" v-if="lis.list">
               <div class="orange">
                   <img :src="lis.url" alt="">
               </div>
              <!-- <v-common></v-common>-->
               <div class="x_ma">
                   <div class="bu_mmg" v-for="sel in lis.list">
                   <div class="li_st">
                       <div class="x_m">
                           <img class="img_l1"   v-lazy="sel.thumb" alt="" @click="getDetail(sel.id)">
                           <span class="wen_zi_m1" v-if="sel.discount">{{sel.discount}}</span>
                       </div>
                       <div class="x_right">
                           <h2 @click="getDetail(sel.id)">{{sel.name}}</h2>
                           <p @click="getDetail(sel.id)">{{sel.goods_brief}}</p>
                           <div class="Select_price"><span @click="getDetail(sel.id)"><strong>{{sel.shop_price | my-filter}}</strong><time v-if="sel.goods_share">/{{sel.goods_share}}</time></span><img src="../image/gou.png" alt="" @click="addCart(sel.id,sel.thumb)"></div>
                       </div>
                   </div>
                   </div>
               </div>
            </div>
       </div>
       </div>
        <p style="height:0.7rem;"></p>
    </div>
</template>
<script>
    import Vue from 'vue'
    import VueScroller from 'vue-scroller'
    Vue.use(VueScroller)
    export default {
        name :'buy',
        components:{
        },
        data(){
            return{
                api:[],
                tag_list:[],//第二次请求的数据的接口
                item_s:[],
                item:[],
                lis:[],
                items:[],
                scrolled: 0,
                page:0,
                height:0,
                stat:true,
            }
         },
         watch:{
            item_s:function(val){
                this.$nextTick(function () {
                    let len     = $('.mm_b').height();
                    this.height = parseInt(len) - 500;
                    this.stat   = true;

                   // console.log('高度'+this.height);
                })
            },
            page:function (val){
                if(this.items[val]){
                     this.stat = false;
                     this.getList(this.items[val]);
                }
            }
          },
         mounted:function(){
            
            //监听滚动分屏
            let that    =  this;
            var cl      = '.buy_';              //切屏层
            var sc      = '.x_recommend';       //滚动层
            var em      = cl + this.page;       //切屏层+id
           
            var handleScroll = function(){

                that.scrolled = $(sc).scrollTop();
                if(that.scrolled > that.height){
                    if(that.stat){
                        that.page ++;
                    }
                }
               // console.log(that.scrolled +'----'+ that.height+'----'+that.page);
            }
            $(sc).scroll(handleScroll);


            //获取第一版数据
            let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Index.php?mode=api&tag=index';
            let Data = this.GLOBAL.dataParam();
            this.$ajax.post(url, Data).then((res) => {
                let temp = res.data;
                if(temp.code == 200){
                    this.items = temp.data;
                    if(this.page == 0){
                       that.getList(this.items[this.page]);
                    }                   
                }else{
                    console.log(temp.msg);
                }
            })

        },
        methods:{
           getList(data){
                let url  = data.url;
                let Data = this.GLOBAL.dataParam();
                this.$ajax.post(url, Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.item_s.push(temp.data);
                    }else{
                        console.log(temp.msg);        
                    }                 
                 })
            },
            getDetail:function(id){
                this.$router.push('/shopDetails?goods_id=' + id);
            },
			addCart:function (goods_id,image, number = 1) {
				this.GLOBAL.addCart(this,goods_id,number);
				this.GLOBAL.get_te(image)
            }
        },

    }
</script>
<style>
    /*打折样式*/
    .wen_zi_m1{
        display:block;
        min-height:0.1rem;
        width:auto;
        padding:0 0.05rem;
        color:#ffffff;
        font-size:0.24rem;
        word-break:break-all;
        /*line-height:0.5rem;*/
        -webkit-border-radius: 0.05rem;
        border-radius:0.05rem;
        position:absolute;
        left:0.25rem;
        top:0.1rem;
        background:deeppink;
    }
    /*小马精选的组件内容*/
    .x_ma{
        height:auto;
        width:100%;
    }
    .x_ma .bu_mmg:last-of-type{
        border-bottom:0;
    }
    .bu_mmg{
        height:2.26rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
    }
    .li_st{
        height:2.26rem;
        width:6.2rem;
        margin:0 auto;
        display:flex;
     /*   flex-wrap: wrap;*/
        justify-content:flex-start;
      /*  border-bottom:0.01rem solid #f0f0f0;*/
    }
    .Select_price{
        height:0.68rem;
        position:relative;
        top:0;
    }
    .Select_price span{
        display:block;
        color:#fc1dac;
        font-size:0.18rem;
        width:2rem;
        height:0.68rem;
        line-height:0.68rem;
    }
    .Select_price strong{
        font-size:0.24rem;
    }
    .Select_price img{
        display:block;
        position:absolute;
        top: -0.08rem;
        right:0.2rem;
        height:0.64rem;
        width:0.64rem;
    }
    .x_m{
       /* flex:1;*/
        height:2.2rem;
        width:2.2rem;
        padding-top:0.05rem;
        position:relative;
    }
    .x_m img{
       /* display:block;*/
        width:2.2rem;
        height:2.2rem;
        margin:0 auto;
    }
    .x_right{
        height: 1.76rem;
        width:4.8rem;
       /* flex: 1;*/
        padding-left:0.04rem;
        padding-top: 0.5rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .x_right h2{
        height:0.42rem;
        color:#474245;
        font-size:0.28rem;
        line-height:0.42rem;
        font-weight:normal;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        font-family: PingFangSC-Medium, sans-serif;
    }
    .x_right p{
        height:0.35rem;
        color:#bababa;
        font-size:0.22rem;
        line-height:0.35rem;
    }
    /*小马*/
    .flyer-img{height:50px;width:50px;border-radius: 50%;}

  /*  .buy_list{
        min-height:2.30rem;
        width:100%;
        display:flex;
       !* flex-wrap: wrap;*!
        justify-content:flex-start;
        margin-bottom:0.3rem;
    }
    .buy_list dl{
        height:2.20rem;
        width:2.11rem;
       !* flex:1;*!
    }
    .buy_list dl dt{
        height:1.54rem;
        width:2.11rem;
    }
    .buy_list dl dd:nth-of-type(1){
        height:0.46rem;
        width:2.11rem;
        color:#333;
        font-size:0.2rem;
        text-indent: 0.23rem;
        line-height:0.46rem;
        overflow: hidden; !*!*自动隐藏文字*!*!
        text-overflow: ellipsis;!*!*文字隐藏后添加省略号*!*!
        white-space: nowrap;!*!*强制不换行*!*!
    }
    .buy_list dl dd:nth-of-type(2){
        width:2.11rem;
        height:0.46rem;
        position: relative;


    }
    .buy_list dl dd:nth-of-type(2) span{
        color:#ff7e67;
        font-size:0.18rem;
        display:block;
       !* margin-left:12px;*!
        text-indent: 0.26rem;
        width: 2.5rem;
    }
    .buy_list dl dd:nth-of-type(2) img{
        display:block;
        height:0.23rem;
        width:0.23rem;
        position:absolute;
        top:-1px;
        left:1.68rem;
    }
    .buy_list dl dt img{
        height:1.54rem;
        width:1.54rem;
        display:block;
        margin:0 auto;
    }*/
   /*buy*/
    .buy{
        min-height:2rem;
        width:100%;
        margin-bottom:0.3rem;
   /* border-bottom:10px solid #f5f4f2;*/
}
    .buy:last-of-type{
        margin-bottom:0;
    }
    .bi_buy{
       /* margin:0.4rem 0;*/
        width:100%;
        height:1rem;
        padding-top:0.4rem;
    }
    #buy_3{
        display:block;
        font-size: 0.32rem;
        color:#474245;
        line-height: 0.42rem;
        width:100%;
        text-align:center;
        height:0.42rem;
        font-weight:normal;
        font-family: PingFangSC-Medium, sans-serif;
    }

   /* .bi_buy h1{
        display:flex;
        color: #4a4a4a;
        height: 0.42rem;
    }*/
    /*1111*/
.delicious{
    height:0.38rem;
    line-height:0.38rem;
    text-align:center;
    color:#afafaf;
    font-size:0.22rem;
    margin-bottom:0.2rem;
}
    .orange{
        height:2rem;
        width:5.95rem;
        margin-bottom: 0.3rem;
        margin:0 auto;
        border-radius: 0.1rem;
    }
.orange img{
    height:2rem;
    width:5.95rem;
    display:block;
    border-radius: 0.1rem;
}
</style>
